<template>
    <div class="record">
        <c-title text="标注账单"></c-title>
        <div class="bill">
            <div class="bill-box">
                <div class="bill-item">
                    <div class="count">{{ statistics.total }}</div>
                    <div class="tips">购买数量</div>
                </div>
                <div class="bill-item">
                    <div class="count">{{ statistics.used_total }}</div>
                    <div class="tips">已使用数量</div>
                </div>
                <div class="bill-item">
                    <div class="count">{{ statistics.unused_total }}</div>
                    <div class="tips">可使用数量</div>
                </div>

            </div>
        </div>

        <div class="tab">
            <div @click="change(1)" :class="{ 'current': index == 1 }">标注权益明细</div>
            <div @click="change(2)" :class="{ 'current': index == 2 }">权益有效期</div>
        </div>
        <div class="list">
            <template v-if="index == 1">
                <div class="list-item" v-for="(item, i) in record_list" :key="i">
                    <div class="list-item-top">
                        <div class="change-type-name">{{ item.change_type_name }}</div>
                        <div :class="item.change_num > 0 ? 'increase' : 'decrease'">{{ item.change_num }}份</div>
                    </div>
                    <div class="list-item-top" style="margin-top: .5rem;align-items: baseline;">
                        <div>
                            <div class="txt">时间：{{ item.created_at }}</div>
                            <div class="txt member-name" v-if="item.other_member_name">{{ item.other_member_name }}
                            </div>
                        </div>
                        <div class="txt">当前权益：{{ item.change_num }}份</div>
                    </div>
                </div>
            </template>

            <template v-else>
                <div class="list-item" v-for="(item, i) in profit_list" :key="i">
                    <div class="list-item-top">
                        <div class="change-type-name">【{{ item.id }}】{{ item.get_type_name }}</div>
                        <div class="increase">{{ item.total }}份</div>
                    </div>
                    <div class="created-at">
                        时间：{{ item.created_at }}
                    </div>
                    <div class="status">
                        <div>可使用：{{ item.unused }}</div>&nbsp;&nbsp;
                        <div>已使用：{{ item.used }}</div>
                    </div>
                    <div class="creaexpire-time" v-if="item.expire_time">
                        截止日期：{{ item.expire_time }}
                    </div>
                </div>
            </template>

        </div>
    </div>
</template>

<script>
import { scrollMixin } from '../../../utils/mixin';
export default {
    mixins: [scrollMixin],
    data() {
        return {
            isLoadMore: true,
            page: 1,
            total_page: 1,
            record_list: [],
            index: 1,
            statistics: {},
            profit_list: [],
        };
    },
    activated() {
        this.isLoadMore = true;
        this.getData();
        this.fun.setWXTitle('标注账单')
        this.get_record();
    },
    methods: {
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.total_page) {
                return
            }
            let page = this.page + 1;

            if (this.index == 1) {
                this.get_record(page)
            } else {
                this.get_profit(page);
            }
        },
        get_profit(page = 1) {
            $http.post("plugin.map-marker.frontend.controllers.member.profit-record.profit", { page }, '').then(({ result, msg, data }) => {
                if (!result) {
                    return this.$toast(msg);
                }
                this.page = data.current_page;
                this.total_page = data.last_page;
                page == 1 ? (this.profit_list = data.data) : (this.profit_list = this.profit_list.concat(data.data));
            });
        },
        get_record(page = 1) {
            $http.post("plugin.map-marker.frontend.controllers.member.profit-record.record", { page }, '').then(({ result, msg, data }) => {
                if (!result) {
                    return this.$toast(msg);
                }
                this.page = data.current_page;
                this.total_page = data.last_page;
                page == 1 ? (this.record_list = data.data) : (this.record_list = this.record_list.concat(data.data));
            })
        },
        getData() {
            $http.post("plugin.map-marker.frontend.controllers.member.index").then(({ result, msg, data }) => {
                if (!result) {
                    return this.$toast(msg);
                }
                this.statistics = data.statistics;
            })
        },
        change(i) {
            this.index = i;
            this.page = 1;
            i == 1 ? (this.get_record()) : (this.get_profit());
        },
    }
};
</script>

<style scoped lang='scss'>
.tips {
    font-size: 0.75rem;
    color: #6E6E79;
    line-height: 1;
}

.count {
    font-weight: bold;
    font-size: 0.9375rem;
    color: #00001C;
    line-height: 1;
    margin-bottom: .4375rem;
}

.creaexpire-time {
    line-height: 1;
    color: #F15353;
    text-align: left;
}

.status {
    display: flex;
    align-items: center;
    color: #F15353;
    line-height: 1;

    margin: .625rem 0;
}

.created-at {
    line-height: 1;
    font-weight: 400;
    font-size: .8125rem;
    margin: .75rem 0;
    text-align: left;
    color: #6E6E79;
}

.list {
    .list-item {
        background-color: #fff;
        margin: 0 .75rem .625rem;
        border-radius: .5rem;
        padding: 1rem .625rem;
        box-sizing: border-box;
    }

    padding-bottom: 3.125rem;
}

.txt {
    font-weight: 400;
    font-size: .8125rem;
    color: #6E6E79;
    line-height: 1;
    text-align: left;
}

.increase {
    font-weight: 500;
    font-size: .875rem;
    color: #F15353;
}

.decrease {
    font-weight: 500;
    font-size: .875rem;
    color: #00001C;
}

.change-type-name {
    font-weight: bold;
    font-size: .8125rem;
    color: #00001C;
}

.member-name {
    text-align: left;
    margin-top: .5rem;
    line-height: 1;
}

.list-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bill {
    margin: .625rem .75rem 0;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: .9375rem .75rem 1.0625rem;
    box-sizing: border-box;
}

.tab {
    height: 2.75rem;
    display: flex;
    align-items: center;

    div {
        flex: 1;
        text-align: center;
        color: #454545;
        font-size: .8125rem;
    }

    .current {
        position: relative;
        color: #F15353 !important;
        font-size: .9375rem;
    }

    .current::after {
        position: absolute;
        content: "";
        left: 50%;
        bottom: -.2813rem;
        transform: translateX(-50%);
        width: .9375rem;
        height: .125rem;
        background: #F15353;
        border-radius: .0625rem .0625rem .0625rem .0625rem;

    }
}

.bill-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>